<template>
  <!-- 模板中必须只有一个根元素，这里就是 .dashboard-container -->
  <div class="dashboard-container">
    <!-- 今日数据 -->
    <Overview :overviewData="overviewData" class="grid-full-width" />

    <!-- 订单管理 -->
    <Orderview :orderviewData="orderviewData" class="grid-full-width" />

    <!-- 菜品总览 -->
    <CuisineStatistics :dishesData="dishesData" />

    <!--  套餐总览 -->
    <SetMealStatistics :setMealData="setMealData" />
  </div>
     <!-- 订单信息列表 -->
    <!-- 关键修正: 将 OrderList 组件移动到 dashboard-container 内部 -->
    <OrderList
      :order-statics="orderviewData"
      @getOrderListBy3Status="getOrderListBy3Status"
      class="grid-full-width"
    />
</template>MountainsOnly(Long).png

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import type { IBusinessData, IOverview, IOrderOverview } from '@/types/workspace';
import type { IOrderStatics } from '@/types/order';
import {
  getBusinessData,
  getOrderData,
  getOverviewDishes,
  getSetMealStatistics,
} from '@/api/index';
import { getOrderStatusStatistics } from '@/api/order';
import Overview from './components/overview.vue';
import Orderview from './components/orderview.vue';
import CuisineStatistics from './components/cuisineStatistics.vue';
import SetMealStatistics from './components/setMealStatistics.vue';
// import OrderList from './components/orderList.vue';

const overviewData = ref<IBusinessData>({});
const orderviewData = ref<IOrderOverview>({});
const dishesData = ref<IOverview>({});
const setMealData = ref<IOverview>({});
const orderStatics = ref<IOrderStatics>({});

const fetchDashboardData = async () => {
  try {
    const [businessRes, orderRes, dishesRes, setMealRes] = await Promise.all([
      getBusinessData(),
      getOrderData(),
      getOverviewDishes(),
      getSetMealStatistics(),
    ]);

    if (businessRes.code === 1) overviewData.value = businessRes.data;
    if (orderRes.code === 1) orderviewData.value = orderRes.data;
    if (dishesRes.code === 1) dishesData.value = dishesRes.data;
    if (setMealRes.code === 1) setMealData.value = setMealRes.data;

  } catch (error) {
    console.error("加载工作台数据失败:", error);
    ElMessage.error('加载工作台数据失败，请稍后重试。');
  }
};

// const getOrderListBy3Status = async () => {
//   try {
//     const res = await getOrderStatusStatistics();
//     if (res.code === 1) {
//       orderStatics.value = res.data;
//     } else {
//       ElMessage.error(res.msg || '获取订单统计失败');
//     }
//   } catch (err) {
//     console.error('获取订单统计失败:', err);
//   }
// };

onMounted(() => {
  fetchDashboardData();
});

// 2. 添加这个新的生命周期钩子
onUnmounted(() => {
  debugger; // 3. 在这里写下 debugger 关键字
  console.log('--- Dashboard 即将被卸载 ---');
});
</script>

<style lang="scss" scoped>
// .dashboard-container {
//   padding: 24px;
//   background-color: #f5f5f5;
//   display: grid;
//   gap: 24px;
//   grid-template-columns: 1fr 1fr;

//   .grid-full-width {
//     /* 这个样式类会让元素从第一网格线开始，到最后一根网格线结束，从而占满整行 */
//     grid-column: 1 / -1;
//   }
// }
</style>
